<template>
    <div class="songListDetails">
        <div class="slide">
            <div class="img">
                <img :src="src" alt="">
            </div>
            <!-- 右侧信息 -->
            <div class="right">
                <div>
                    <h2>{{ singer.singer_name }}</h2>
                    <!-- 用户头像 -->
                    <div class="use">
                        <p>国籍：中国</p>
                        <p>职业:歌手、音乐创作人</p>
                        <p>代表作品:《画》，《南方姑娘》，《成都》</p>
                        <p>粉丝数：394.3万</p>
                    </div>
                </div>
                <!-- 右侧信息下方 -->
                <div>
                    <el-button type="primary but" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofangyinle"></use>
                        </svg>                        
                        已关注
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { url } from '@/apiUrl'
export default {
    data(){
        return {
            src:`${url}/${this.singer.avatar_url}`
        }
    },
    props:{
        singer:null
    },
    mounted(){
        console.log(this.singer);
    }
}
</script>
<style lang="scss" scoped>
@import '../../../assets/common.scss';
.songListDetails {
    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img {
        width: 18.85rem;
        height: 18.85rem;
        border-radius: 50%;
        margin-right: 2rem;
    }
    .slide {
        display: flex;
        justify-content: flex-start;
        div {
            .use{
                width: 100%;
            }
            .head {
                margin: 0.5rem 0;
                width: 4rem;
                height: 4rem;
                border-radius: 50%;
            }
        }
        .but {
            .icon{
                font-size:2rem;
                margin-bottom: -0.2rem;
            }
            background-color: $undercolor;
        }
    }
}
</style>